<template>
  <!-- 部门管理 -->
  <div class="TenantInformationManagement">
    <div style="padding: 0px 0px;">
      <!-- 搜索 -->
      <!-- <SearchCForL
        :searchData="dataModel"
        @searchCallBack="searchCallBack"
      ></SearchCForL> -->
      <searchComponentsCss
        :key="searchKey"
        :searchData="dataModel"
        @searchCallBack="searchCallBack"
        :optionsZi="optionsZi"
        :searchOptionTable="searchOptionTable" 
        :shrinkBoxOpenClose='shrinkBoxOpenClose'
      ></searchComponentsCss>
      <!-- 收缩框 -->
      <!-- {{numSearch}} -->
      <div class="shrinkBox" @click="shrinkBoxOpenClose = !shrinkBoxOpenClose">
          <i :class="shrinkBoxOpenClose?'el-icon-arrow-up':'el-icon-arrow-down'" v-if="numSearch>8"></i>
      </div>
      <!-- <div class="buttons">
         style="position: absolute;top: 65px;left:77%;"
      </div> -->
      <div style="border-top:1px solid #E6E6E6;margin:0px 30px;"></div>
      <div class="right_row" style="padding: 25px 30px;">
        <!--添加和批量删除组件-->
        <buttonhurdle
          class="buttonhurdle"
          
          :diaDataAdd="dataModel"
          :optionsZi="optionsZi"
          :searchOptionTable="searchOptionTable" 
          @toAdd="toAdd"
          @toDelete="toDelete"
        ></buttonhurdle>
        <!-- <div class="buttons" style="float:right;padding:10px;">
          <el-button
            type="primary"
            style="margin-left:-10px;"
            size="mini"
            plain
            @click="sunS_F"
            icon="el-icon-search"
          >搜索</el-button>
          <el-button
            type="primary"
            size="mini"
            plain
            icon="el-icon-refresh-right"
            @click="emptySearch"
          >重置</el-button>
          <el-button  
            type="primary"
            size="mini"
            plain
            icon="el-icon-notebook-2"
          >配置</el-button>
        </div> -->
        <!-- 右侧公共组件 -->
        <rightButtons
          style="float:right;padding:10px;"
          @sunS_F='sunS_F'
          @emptySearch='emptySearch'
          @configuration='configuration'
          class="right_buttons"
        ></rightButtons>
      </div>

    </div>
    <!-- {{dataAttribute}} -->
    <div class="out" >
      <!-- 字典 -->
      <dictionaries :key='dictionariesKey' :searchData='dataModel' :modelType='modelType' @optionData="dictionariesCallBack"></dictionaries>
      <!--数据列表-->
      <el-table
        ref="multipleTable"
        :data="dataAttribute"
        @selection-change="handleSelectionChange"
        v-loading.body="false"
        border
        fit
        highlight-current-row
        max-height="511px"
        size="mini"
        :cell-style="{padding:'5px 0'}"
      >
        <el-table-column align="center" type="selection" :show-overflow-tooltip="true" width="45"></el-table-column>
        <el-table-column
          align="center"
          label="序号"
          type="index"
          :index="indexMethod"
          width="54"
        >
        </el-table-column>
        <el-table-column
          align="center"
          v-for="item in dataModel"
          v-if="item.tableSign"
          :key="item.id"
          :label="item.CN"
          :show-overflow-tooltip="true"
           min-width="140px"
        >
          <!-- show-overflow-tooltip -->
          <!-- width="120px" -->
          <!-- <template slot-scope="scope">{{scope.row[item.EN]}}</template> -->
          <template slot-scope="scope">{{item.type === 'select' ? optionDatas(item.typeGroupCode?optionsZi[item.EN]:searchOptionTable[item.EN],scope.row[item.EN]):scope.row[item.EN]}}</template>
        </el-table-column>
        <el-table-column width="180px" align="center" label="操作">
          <template slot-scope="scope">
            <!-- 查看按钮 -->
            <el-button
              style="color:#0B9AC3;border:none;"
              icon="el-icon-view"
              circle
              @click="makeExaId(scope.row)"
            ></el-button>
            <!-- 修改组件 -->
            <modificationi
            :key="dictionariesKeymodifyData"
              class="inline_block"
              :attributeOrder="dataModel"
              :modData="scope.row"
              @modifyData="modifyData"
              :optionsZi="optionsZi"
              :searchOptionTable="searchOptionTable" 
            ></modificationi>
            <!-- 删除按钮 -->
            <el-button
              style="color:#C90010;border:none;"
              icon="el-icon-delete"
              circle
              @click="deleteList(scope.row.id)"
            ></el-button>
          </template>
        </el-table-column>
      </el-table>

      <!-- 分页 -->
      <el-pagination
        style="margin-top:15px;"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="currentPage"
        :page-sizes="[10, 20, 30, 40]"
        :page-size="pagesize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="pagetotal"
      ></el-pagination>
    </div>
    <!-- 查看组件 -->
    <examine
      :DialogVisibleMod="DialogVisibleExamine"
      :modData="examineData"
      :attributeOrder="dataModel"
      @examineDialog="examineDialog"
      :optionsZi="optionsZi"
      :searchOptionTable="searchOptionTable" 
    ></examine>
  </div>
</template>
<script>
//引入组件
import {
  SearchCForL,
  buttonhurdle,
  // modificationi,
  searchComponentsCss,
  examine,
  searchComponents,
  dictionaries,
  rightButtons
} from "@/views/components/FLPage";
//引入组件
import modificationi from "./compotents/modificationi";
//引入api ajax
import {
  addTSDepart,//增加
  deleteTSDepart,//单项删除
  searchTSDepart,//分页查询
  modifyTSDepart,//修改
  getTSDepart,//查看
  selectBysyscompanycode//根据租户编号查询部门
} from "@/api/tSDepart";
export default {
  components: {
    buttonhurdle,
    modificationi,
    examine,
    searchComponents,
    searchComponentsCss,
    SearchCForL,
    dictionaries,
    rightButtons
  },
  name:'TenantInformationManagement',
  data() {
    return {
      numSearch:0,
      //   收缩框开关
      shrinkBoxOpenClose:false,
      dictionariesKey:0,
      dictionariesKeymodifyData:0,
      // 搜索框刷新组件
      searchKey:0,
      //搜索框
      // suoS: {},
      // indexMethods:'',
      menuTrigger: "",
      //搜索
      searchContent: {},
      //后端传来的数据
      dataAttribute: [],
      //分页
      currentPage: 1, //当前页
      pagesize: 10, //每页条数
      pagetotal: 0, //总条数
      //查看的数据
      examineData: {},
      //查看的弹窗控制器
      DialogVisibleExamine: false,
      //表格中选中的数组
      multipleSelection: [],
      // 字典请求字段数据
      modelType:'table',
      optionsZi:[],
      searchOptionTable:[],
      //数据模型
      dataModel:  
      [
        {
          EN: "ID",
          CN: "ID",
          value: "",
          type: "input",
          option: [],
          Exp: "^.{3,20}$",
          err: "长度为3-20的所有字符!",
          result: true,
          sign: true,
          searchSign: false,
          addSign: false,
          tableSign: false,
          examineSign: false,
          examineDisabled: false,
          modificationSign: false
        },
        {
          EN: "orgCode",
          CN: "部门编码",
          value: "",
          type: "input",
          option: [],
          Exp: "^.{3,20}$",
          err: "长度为3-20的所有字符!",
          result: true,
          sign: true,
          searchSign: true,
          addSign: true,
          tableSign: true,
          examineSign: true,
          examineDisabled: false,
          modificationSign: true
        },
        {
          EN: "departname",
          CN: "部门名称",
          value: "",
          type: "input",
          option: [],
          Exp: "^.{2,20}$",
          err: "长度为2-20的所有字符!",
          result: true,
          sign: true,
          searchSign: true,
          addSign: true,
          tableSign: true,
          examineSign: true,
          examineDisabled: false,
          modificationSign: true
        },
        {
          EN: "parentdepartid",
          CN: "上级部门",
          value: "",
          type: "select",
          option: [],
          Exp: "^.{3,20}$",
          err: "长度为3-20的所有字符!",
          result: true,
          sign: true,
          searchSign: true,
          addSign: true,
          tableSign: true,
          examineSign: true,
          examineDisabled: false,
          modificationSign: true,
          dictTable:{
            table:'t_s_depart',
            id:'id',
            name:'departname',
            associated:1
          },
          skipSign:true
        },
        {
          EN: "orgType",
          CN: "机构类型",
          value: "",
          type: "input",
          option: [],
          Exp: "^.{3,20}$",
          err: "长度为3-20的所有字符!",
          result: true,
          sign: true,
          searchSign: false,
          addSign: false,
          tableSign: false,
          examineSign: false,
          examineDisabled: false,
          modificationSign: false
        },
        {
          EN: "mobile",
          CN: "手机号",
          value: "",
          type: "input",
          option: [],
          Exp: "^[1][3,4,5,7,8][0-9]{9}$",
          // Exp: "^.{3,20}$",
          err: "请输入正确的手机号格式",
          result: true,
          sign: true,
          searchSign: false,
          addSign: true,
          tableSign: true,
          examineSign: true,
          examineDisabled: false,
          modificationSign: true
        },
        {
          EN: "fax",
          CN: "邮箱",
          value: "",
          type: "input",
          option: [],
          Exp: "^.{3,20}$",
          err: "长度为3-20的所有字符!",
          result: true,
          sign: true,
          searchSign: false,
          addSign: false,
          tableSign: false,
          examineSign: true,
          examineDisabled: false,
          modificationSign: false
        },
        {
          EN: "address",
          CN: "地址",
          value: "",
          type: "input",
          option: [],
          Exp: "^.{3,20}$",
          err: "长度为3-20的所有字符!",
          result: true,
          sign: true,
          searchSign: false,
          addSign: false,
          tableSign: false,
          examineSign: true,
          examineDisabled: false,
          modificationSign: false
        },
        {
          EN: "description",
          CN: "描述",
          value: "",
          type: "input",
          option: [],
          Exp: "^.{3,20}$",
          err: "长度为3-20的所有字符!",
          result: true,
          sign: true,
          searchSign: false,
          addSign: false,
          tableSign: false,
          examineSign: true,
          examineDisabled: false,
          modificationSign: false
        },
        {
          EN: "departOrder",
          CN: "排序",
          value: "",
          type: "input",
          option: [],
          Exp: "^.{3,20}$",
          err: "长度为3-20的所有字符!",
          result: true,
          sign: true,
          searchSign: false,
          addSign: false,
          tableSign: false,
          examineSign: false,
          examineDisabled: false,
          modificationSign: false
        },
        {
          EN: "departnameEn",
          CN: "英文名",
          value: "",
          type: "input",
          option: [],
          Exp: "^.{3,20}$",
          err: "长度为3-20的所有字符!",
          result: true,
          sign: true,
          searchSign: false,
          addSign: false,
          tableSign: false,
          examineSign: false,
          examineDisabled: false,
          modificationSign: false
        },
        {
          EN: "departnameAbbr",
          CN: "缩写",
          value: "",
          type: "input",
          option: [],
          Exp: "^.{3,20}$",
          err: "长度为3-20的所有字符!",
          result: true,
          sign: true,
          searchSign: false,
          addSign: false,
          tableSign: false,
          examineSign: false,
          examineDisabled: false,
          modificationSign: false
        },
        {
          EN: "memo",
          CN: "备注",
          value: "",
          type: "input",
          option: [],
          Exp: "^.{3,20}$",
          err: "长度为3-20的所有字符!",
          result: true,
          sign: true,
          searchSign: false,
          addSign: true,
          tableSign: true,
          examineSign: false,
          examineDisabled: false,
          modificationSign: true,       
          skipSign:true
        },
        {
          EN: "type",
          CN: "公司类型",
          value: "",
          type: "input",
          option: [],
          Exp: "^.{3,20}$",
          err: "长度为3-20的所有字符!",
          result: true,
          sign: true,
          searchSign: false,
          addSign: false,
          tableSign: false,
          examineSign: false,
          examineDisabled: false,
          modificationSign: false
        },
        {
          EN: "region",
          CN: "所属地区",
          value: "",
          type: "input",
          option: [],
          Exp: "^.{3,20}$",
          err: "长度为3-20的所有字符!",
          result: true,
          sign: true,
          searchSign: false,
          addSign: false,
          tableSign: false,
          examineSign: false,
          examineDisabled: false,
          modificationSign: false
        },
      ],
      // 部门编号
      // 上级部门
    };
  },
  created() {
    // this.forData(this.currentPage, this.pagesize);
  },
  methods: {
    getSSearchNum(){
      let searchData = this.searchData
      let num = 0
      for (let i = 0; i < searchData.length; i++) {
        const element = searchData[i];
        if (element.searchSign) {
          num +=1
        }
        else{
          num = num
        }
      }
      this.numSearch = num
    },
    // 配置
    configuration(msg){
      if (msg == '配置') {
        console.log(msg);
        
      }
    },
    // 重置
    emptySearch(msg){     
      if (msg == '重置') {
        let searchContent = this.searchContent
        console.log(this.searchContent,855555);
        
        for (const key in this.searchContent) {
          if (this.searchContent.hasOwnProperty(key)) {
            this.searchContent[key] = ""
          }
        }
        console.log(this.dataModel,966666);  
        for (let i = 0; i < this.dataModel.length; i++) {
          this.dataModel[i].value = ""
        }
        console.log(this.searchContent,'kankanjiguo');
        console.log(this.dataModel,'dataModel');
        this.searchKey = this.searchKey + 1
        
        // this.forData(this.currentPage, this.pagesize);
        this.forData(this.currentPage, this.pagesize, this.searchContent);
      }
    },
    handleSelectionChange(val) {
      this.multipleSelection = val;
      console.log(this.multipleSelection);
    },
    //查看关闭弹窗
    examineDialog(dialogVisibleMod) {
      this.DialogVisibleExamine = false;
    },
    //分页查询
    forData(page, size, content) {
      // console.log(page,size,content);
      
      searchTSDepart(page, size, content).then(response => {
        this.dataAttribute = response.data.list;         
        this.pagetotal = response.data.total;
      });
    },
    //分页
    handleSizeChange(val) {
      console.log("每页 " + val + " 条");
      this.pagesize = val
      this.forData(this.currentPage, val, this.searchContent);
    },
    handleCurrentChange(val) {
      console.log("当前页: " + val);
      // 序号
      // this.indexMethod()
      this.forData(val, this.pagesize, this.searchContent);
      this.currentPage = val
    },
    //查询组件回调
    searchCallBack(newData) {
      let obj = {};
      for (let i = 0; i < newData.length; i++) {
        obj[newData[i].EN] = newData[i].value;
      }
      console.log(obj)
      this.searchContent = obj;
    },
    //搜索
    sunS_F() {
      //console.log(this.searchContent); //用这组数据去ajax查询
      this.forData(this.currentPage, this.pagesize, this.searchContent);
    },
    //增加
    toAdd(toAddData) {
      console.log("toAddData");
      console.log(toAddData);
      let obj = {};
      for (let i = 0; i < toAddData.length; i++) {
        obj[toAddData[i].EN] = toAddData[i].value;
      }
      addTSDepart(obj)
        .then(response => {
          this.forData(this.currentPage, this.pagesize, this.searchContent);
          this.$message({
            message: response.message,
            type: "success"
          });
          // 刷新跨表字典  获取新的值
          this.dictionariesKey = this.dictionariesKey + 1
        })
        .catch(() => {
          this.$message.error("添加失败");
        });
    },
    //批量删除
    toDelete(toDeleteData) {
      console.log(toDeleteData);
      console.log(this.multipleSelection);
      let arr = [];
      for (let i = 0; i < this.multipleSelection.length; i++) {
        arr.push(this.multipleSelection[i].id);
        this.$confirm("确认批量删除？")
          .then(_ => {
            deleteTSDepart(arr).then(response => {
              this.forData(this.currentPage, this.pagesize, this.searchContent); //刷新列表
            });
            done();
          })
          .catch(_ => {});
      }
    },
    //单项删除
    deleteList(id) {
      console.log(id);
      let arrId = [id];
      this.$confirm("确认删除？")
        .then(_ => {
          deleteTSDepart(arrId).then(response => {
            this.forData(this.currentPage, this.pagesize, this.searchContent); //刷新列表
            this.$message({
              type:'success',
              message:'已删除'
            })
          });
        })
        .catch(_ => {
          // this.$message({
          //   type:'warning',
          //   message:'已取消删除'
          // })
        });
    },
    //查看
    makeExaId(row) {
      let copyDialog = true;
      this.DialogVisibleExamine = copyDialog;
      this.examineData = row;
    },
    //表格选中事件
    handleSelectionChange(val) {
      this.multipleSelection = val;
      //传递删除的参数
      this.deleteDataList = val;
    },
    //修改
    modifyData(value, MDData) {
      console.log(value, MDData);
      if (value) {
        let id = MDData.id;
        console.log(id,MDData,'修改参数');
        modifyTSDepart(id, MDData)
          .then(Response => {
            console.log(1111,'5555');
            
            this.forData(this.currentPage, this.pagesize, this.searchContent);
            console.log(122221,'522225');
          // 刷新跨表字典  获取新的值
          this.dictionariesKey = this.dictionariesKey + 1
            // this.$message({
            //   message: "修改成功!",
            //   type: "success"
            // });
          })
          .catch(() => {
            this.$message.error(
              "错误信息：api/admin/modifyTSDepart/${id}！"
            );
          });
      }
    },
    // 字典组件回调
    dictionariesCallBack([a={}, b={}]){
      // 正常字典
      this.optionsZi = a
      // 跨表字典
      this.searchOptionTable = b
      console.log(a,b,66688); 
      // console.log(options, 111)
      // console.log(options,'huilaide');
      // this.optionsZi = options
      this.forData(this.currentPage, this.pagesize, this.searchContent);  
    // }  
    },
    // 序号
    indexMethod(index){
      var currentPage = this.currentPage
      var pagesize = this.pagesize
      this.$nextTick(function(){
        currentPage = this.currentPage
        pagesize = this.pagesize
      })      
      // console.log(currentPage,pagesize,'996');
      // console.log(currentPage*pagesize+index - 9);
      return currentPage*pagesize -pagesize +1+index
    },
  },
  computed:{
    // 字典计算属性
    optionDatas(){
      return function (arr,val) {
        //console.log(arr[val],'why');
          if (arr) {
            for (let i = 0; i < arr.length; i++) {
            if(arr[i].value == val){
              // console.log(arr[i].label)
            return arr[i].label    
            }                   
          }   
        }  
      }
    }
  }
};
</script>
<style scoped src="@/styles/allCssP.css"></style>
<style lang="scss" scoped>
  .TenantInformationManagement{
    .shrinkBox{
      text-align: center;
      font-weight: 700;
      font-size: 20px;  
      height: 25px;
      // border-bottom:1px solid #E6E6E6;
    }
    /deep/ .el-table--mini{
      .gutter{
        display: table-cell!important;
      }
      .el-checkbox__inner{
        width: 12px;
        height: 12px;
      }
      // 改变表头的高度  改为45px
      /deep/.el-table__header-wrapper{
        .el-table__header{
          .has-gutter{
            tr{
              th{
                padding: 5px 0 !important;
                height: 34px;
                line-height: 34px;
              }
            }
          }
        }
      }
      // 表头操作固定定位
      /deep/.el-table__fixed-right{
        .el-table__header{
          thead{
            tr{
              th{
                padding: 5px 0 !important;
                height: 34px;
                line-height: 34px;
              }
            }
          }
        }

      }
    }
    .right_row{
      display: flex;
      // justify-content: start;
      align-items: center;
      position: relative;
      
      .buttons{
        position: absolute;
        padding: 0px !important;
        right: 30px;
      }
      .buttonhurdle{
        padding: 0px !important;

      }
    }
    .do{
      display: flex;
    }
    .pagination{
      text-align: left;
      margin-top: 20px;
    }
}
</style>